<script lang="tsx">
import { ElRow, ElCol } from 'element-plus'
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
    useSlot: {
      type: Boolean,
      default: false
    }
  },
  render() {
    let children = this.$slots.default ? this.$slots.default() : []
    if (this.useSlot) {
      const slotNode = children[0]
      if (slotNode) {
        children = slotNode.children || []
      }
    }
    const footer = this.$slots.footer ? this.$slots.footer() : []
    return(
      <div className={`search-box ${this.isCollapse && 'is-collapse'}`}>
        <ElRow gutter={20}>
          {
            children.map(item => (
              <ElCol span={6}>
               { item }
              </ElCol>
            ))
          }
        </ElRow>
         <div className='search-box-footer'>
           { footer }
         </div>
      </div>
    )
  }
}
</script>

<style scoped lang="scss">
.search-box {
  display: none;
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #E6EBF1;
  &.is-collapse {
    display: block;
  }
}
</style>
